{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../static/img/favicon.ico">

    <title>Signin Sunmoon's blog</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


    <!-- Custom styles for this template -->
{#    <link rel="stylesheet" href="../../static/css/main.css">#}
{#    <script type="text/javascript" src="../../static/js/jquery.js"></script>#}
</head>

<body>
<div class="container">
    <header>
        <h3>{{ article.title }}</h3>
        <p>
            <img class="img-thumbnail mr-auto" width="60" height="60" src="{{ article.author.avatar }}" style="margin-left: 40px;margin-right: 20px; border-radius: 100px">
            {{ article.author.nickname }} |
            <button id="btn_like" class="btn btn-light" style="margin: 10px"><i class="material-icons">thumb_up</i></button>{{ article.articlelike_set.count }}
            |
            {{ article.publish_time}}
        </p>
    </header>
    <div class="row">
        <div class="col col-sm-8">
            <h3>{{ article.title }}</h3>
            {{ article.content | safe }}
        </div>
        <div class="col-sm-4">
            <h4 class="font-italic">Archives</h4>
            <ol class="list-unstyled mb-0">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
            </ol>
        </div>
    </div>
    <hr class="text-success">
    <div class="col-sm-8">
        <p>
            <label for="comment_content" class="text-info text-lg">写评论</label>
            <textarea id="comment_content" class="form-control" rows="4" cols="60"></textarea>
        </p>
        <p>
            <button id="btn_comment" class="btn btn-outline-info btn-md" value="保存">保存</button>
        </p>
    </div>
    <div>
    {% if comments %}
        {% for comment in comments %}
            <hr class="btn-outline-info">

            <div class="card">
            <div class="card-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-1">
                            <img class="img-thumbnail mr-auto" width="60" height="60" src="{{ comment.fromUser.avatar }}" style="border-radius: 60px">
                        </div>
                        <div class="col-md-11 mt-1">
                        {{ comment.fromUser.nickname }}
                        <br>
                        {{ comment.ptime }}
                        </div>
                    </div>

                </div>
            </div>
            <div class="card-body">
                <div class="card-text">
                    {{ comment.content }}
                </div>

                <div class="row">
                        <div class="col-md-6">
                            <button onclick="likeComment({{ comment.id }})" name="{{ comment.id }}" class="btn btn-light"><i class="material-icons">thumb_up</i></button>
                            {{ comment.commentlike_set.count }}人赞 &nbsp; <button onclick="replyComment({{ comment.id }})" class="btn btn-light mt-2"><i class="material-icons">insert_comment</i></button>回复
                        </div>
                </div>
                <div class="container">
                    {% if comment %}
                        {% for reply in comment.replies %}
                            <div class="col-sm-11 ml-md-auto">
                            <img class="img-thumbnail mr-auto" width="60" height="60" src="{{ reply.fromUser.avatar }}" style="border-radius: 60px">
                                <b style="color: #17a2b8">{{ reply.fromUser.nickname }}:</b>
                                {% if reply.toUser %}
                                    <b style="color: #17a2b8">@{{ reply.toUser.nickname }}: &nbsp;</b>
                                {% endif %}
                                 {{ reply.content }} <br>
                            <b><small>{{ reply.ptime }}</small></b> <button onclick="replyReply({{ comment.id }}, {{ reply.id }})" class="btn btn-light mt-2"><i class="material-icons">insert_comment</i></button>回复
                            </div>
                           <br>
                        {% endfor %}

                    {% endif %}
                </div>
            </div>
            </div>
        {% endfor %}
    {% endif %}


    </div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
    $(document).ready(function () {
           $("#btn_comment").click(function () {
               {#alert("东方教主。");#}
               {#u = 'http://127.0.0.1:8000/blog/detail/1/publish_comment/';#}
               $.ajax({
                   url: '{% url 'blog:blog_publish_comment' %}',
                   type: "POST",
                   dataType: 'json',
                   cache: false,
                   data: {"article_id": {{ article.id }},
                       'comment': $("#comment_content").val()},
                   success: function (e) {
                       if (e==='1'){
                           parent.location.reload();
                       } else {
                           parent.location.reload();
                       }
                   }
                });
           });

           $("#btn_like").click(function () {
               alert("真的喜欢吗？");
               $.ajax({
                   url: "{% url 'blog:like_article' %}",
                   type: "POST",
                   data: {
                       "article_id": {{ article.id }}
                   },
                   success: function (e) {
                       if (e === "1") {
                           parent.location.reload();
                       } else {
                           alert("点赞失败！")
                       }
                   }
               });
           });


        });

    {#点赞该条评论#}
    function likeComment(id) {
        $.ajax({
            url: "{% url 'blog:like_comment'%}",
            type: "POST",
            data: {
                'comment_id': id,
            },
            success: function (e) {
                if (e === "1") {
                    parent.location.reload()
                } else {
                    alert("点赞失败！")
                }
            }
        });
    }

    {#回复该条评论#}
    function replyComment(id) {
        layer.prompt(function(val, index){
            {#layer.msg('得到了'+val);#}
            {#alert("获取了"+val);#}
            $.ajax({
                url: "{% url 'blog:reply_comment' %}",
                type: "POST",
                data: {
                    "comment_id": id,
                    "content": val,
                },
                success: function (e) {
                    if (e==="1") {
                        parent.location.reload();
                    } else {
                        alert("回复失败了！！！");
                    }
                }
            });
            layer.close(index);
        });
    }

    {#回复该条回复#}
    function replyReply(cid, rid) {
        alert('回复'+rid);
        layer.prompt(function(val, index){
            $.ajax({
                url: "{% url 'blog:reply_reply' %}",
                type: "POST",
                data: {
                    "comment_id": cid,
                    "to_uid": rid,
                    "content": val,
                },
                success: function (e) {
                    if (e==="1") {
                        parent.location.reload();
                    } else {
                        alert("回复失败了！！！")
                    }
                }
            });
            layer.close(index);
        });
    }
</script>
</body>

</html>



